<template>
  <div>
      <div class="wrapper_input">
          <input type="text" placeholder="用户名" class="wrapper_input_content" v-model="username">
      </div>
      <div class="wrapper_input">
          <input type="password" placeholder="密码" class="wrapper_input_content" v-model="password">
      </div>
      <button>登录按钮</button>
  </div>
</template>

<script>
import { reactive, toRefs, ref, watchEffect, onMounted } from "vue";
import { useRouter } from "vue-router";
import { FetchLogin } from "@/services";
import MyToast, { useToastEffect } from "@/components/MyToast.vue";

const useLoginEffect = (showToast) => {
  const data = reactive({
    username: "",
    password: ""
  })
  const router = useRouter()
  const handleLogin = async () => {
    try {
      const result = await FetchLogin({
        username: data.username,
        password: data.password
      });
      if (result.code === 0) {
        router.push({ name: "Home" })
      } else {
        showToast("登陆失败")
      }
    } catch (e) {
      showToast("请求失败")
    }
  };

  return {
    ...toRefs(data),
    handleLogin,
  };
};

export default {
    name: "Login",
  components: { MyToast },
  setup() {
    const { show, showToast, toastMessage } = useToastEffect();
    const { username, password, handleLogin } = useLoginEffect(showToast);
    onMounted(() => {
      useTitle("登陆页面");
    })

    return {
      handleLogin,
      show,
      toastMessage,
      username,
      password,
    };
  },
}
</script>

<style>

</style>
